<template>
    <div id="businessPhoneTime">
        <div class="title">
            <h1>商家电话管理</h1>
        </div>
        <el-form ref="businessPhoneData" :model="businessPhoneData" label-width="90px" :rules="rules"
            class="demo-ruleForm">
            <el-form-item label="当前电话：">
                <span>{{this.oldPhoneNum}}</span>
            </el-form-item>
            <el-form-item label="新的电话：" label-width="130px" class="newPhoneBox" prop="newPhoneNum">
                <el-input v-model.number="businessPhoneData.newPhoneNum" style="width: 250px;" size="small" clearable
                    auto-complete="off">
                </el-input>
            </el-form-item>
            <el-form-item class="btnClass">
                <el-button type="primary" @click="sureChange('businessPhoneData')" style="width: 330px; margin: 0;">确认修改
                </el-button>
            </el-form-item>

        </el-form>

    </div>
</template>

<script>
export default {
    data() {
        return {
            userId:'',
            oldPhoneNum:'15522552554',
            businessPhoneData: {
                newPhoneNum: '',
            },
            rules: {
                newPhoneNum: [
                    { required: true, message: '电话号码不能为空', },
                    { type: 'number', max:99999999999 ,message: '请输入正确的11位电话号码' }
                ],
            }
        }
    },
    methods: {
        sureChange(ruleName) {
            console.log(this.$refs[ruleName].validate)
            this.$refs[ruleName].validate((valid) => {
                if (valid) {
                    this.$confirm("此操作将修改商家电话, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        // console.log(this.businessPhoneData.newPhoneNum)
                        // console.log(this.userId)
                        this.$axios({
                            url: "/emp/updateTel",
                            method: "put",
                            params: {
                                eid: this.userId,
                                tel: this.businessPhoneData.newPhoneNum
                            }
                        }).then((res) => {
                            if (res.data.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "商家电话修改成功.",
                                });
                                this.getUserPhoneInfo()
                            } else {
                                this.$message({
                                    type: "info",
                                    message: "商家电话修改失败，请重新操作.",
                                });
                            }
                        });
                    }).catch(() => {
                        this.$message({
                            type: "info",
                            message: "取消商家电话修改!!!",
                        });
                    });
                } else {
                    console.log('电话号码不能为空哦！');
                    return false;
                }
            });

        },
        // 请求用户信息中的tel
        getUserPhoneInfo(){
            this.$axios({
                    url: "/emp/query",
                    method: "get",
                }).then((res) => {
                    if (res.data.code == 0) {
                        this.userId = res.data.data[0].eid
                        this.oldPhoneNum = res.data.data[0].tel
                    } else {
                        this.$message({
                            type: "info",
                            message: "兑换时长时间查询失败，请重新操作.",
                        });
                    }
                })
        },
    },
    mounted(){
        this.getUserPhoneInfo()
    }
}
</script>

<style scoped lang="less">
#businessPhoneTime {
    margin: 0;
    padding: 0;

    & .title {
        text-align: left;
        line-height: 0;
    }

    &>.el-form {
        width: 350px;
        height: 200px;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        // outline: 1px solid red;
        margin-top: 50px;
        padding: 10px;
        background: #f2f2f2;

    }

    /deep/ .el-form-item__label {
        /* text-align: right; */
        vertical-align: middle;
        font-size: 16px;
        color: #333333;
        line-height: 40px;
        padding: 0;
    }

    .el-form-item {
        margin: 10px 0;
    }

    .newPhoneBox {
        position: relative;
        left: -40px;
    }

    .btnClass button {
        position: relative;
        top: 10px;
        left: -68px;
    }
}
</style>